<template>
	<uni-popup ref="popup" :safe-area="false">
		<view class="bottom-popup">
			<view class="popup-title d-flex psr a-center j-center">
				<view class="text-title">性别</view>
				<image @tap="closePopup" class="title-icon" src="@/static/image/close.png"></image>
			</view>
			<view class="popup-show d-flex a-center">请选择您的性别</view>
			<view class="popup-row  d-flex a-center">
				<view class="row-cell d-flex j-center">
					<view class="cell-content">
						<image v-if="value==1" class="cell-img" src="@/static/userinfo/nan-z.png"></image>
						<image v-else class="cell-img" src="@/static/userinfo/nanw.png" @tap="bindChange(1)"></image>
						<view class="d-flex j-center">
							<view class="cell-text d-flex">
								<image class="text-icon" src="@/static/userinfo/nan-icon.png"></image>
								<view class="text-text">男</view>
							</view>
						</view>
					</view>
				</view>
				<view class="row-cell d-flex j-center">
					<view class="cell-content">
						<image v-if="value==2" class="cell-img" src="@/static/userinfo/nv-z.png"></image>
						<image v-else class="cell-img" src="@/static/userinfo/nvw.png"  @tap="bindChange(2)"></image>
						<view class="d-flex j-center">
							<view class="cell-text d-flex">
								<image class="text-icon" src="@/static/userinfo/nv-icon.png"></image>
								<view class="text-text">女</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="popup-button d-flex j-center">
                <view class="btn_main_r" _style="width:650rpx;font-weight: 600;" @tap="determine">
                    <text class="text">确定</text>
                </view>
				<!-- <tm-button class="button-button" :width="650" :shadow="-1"
				    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#FFFFFF" @tap="determine"
				    label="确定"></tm-button> -->
			</view>
		</view>
	</uni-popup>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue";

const value = ref()

const popup = ref()
const showPopup = (sex:number) => {
	popup.value.open("bottom")
}
const closePopup = () => {
	popup.value.close()
}

const bindChange = (sex:number) => {
	value.value = sex
}
//确定选择并给父页面传值
const emit = defineEmits(["onGetSex"])
const determine = () => {
	emit("onGetSex", value.value);
	closePopup();//关闭
}
defineExpose({
  showPopup,
  closePopup
});
</script>
<style lang="scss" scoped>
.bottom-popup{
	padding-bottom: 60rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	.popup-title{
		height: 100rpx;
		border-bottom: 1rpx solid #E4E4E4;
		.title-text{
			position:absolute;
			top:34rpx;
			left:50rpx;
			height: 32rpx;
			width: 234rpx;
		}
		.title-icon{
			position:absolute;
			top:32rpx;
			right: 30rpx;
			
			width: 36rpx;
			height: 36rpx;
		}
	}
	.popup-show{
		height: 80rpx;
		padding-left: 30rpx;
		
	}
	.popup-row{
		padding:57rpx 25rpx 130rpx 25rpx;
		.row-cell{
			width: 50%;
			.cell-content{
				width: 160rpx;
				.cell-img{
					width: 160rpx;
					height: 160rpx;
				}
				.cell-text{
					.text-icon{
						width: 36rpx;
						height: 36rpx;
					}
					.text-text{
						padding-left: 10rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
	}
	.popup-button{
		.button-button{
			border-radius: 45rpx;
		}
	}
}
</style>